<form class="layui-form" method="post">
    <div class="layui-form-item" style="padding-top: 2%">
        <label class="layui-form-label">主机商：</label>
        <div class="layui-input-inline">
            <select name="serverid" lay-verify="required" lay-filter="service">
                <option value=""></option>
                <volist name=":C('ServerProvider')" id="vo">
                    <option value="{$vo['val']}" <eq name="i" value="1">selected</eq> <if condition="!$vo['is_display']">disabled</if> >{$key}</option>
                </volist>
            </select>
        </div>
    </div>
   <!-- <div class="layui-form-item">
        <label class="layui-form-label">镜像id：</label>
        <div class="layui-input-block">
            <select name="imgid" lay-verify="required" id="imgcontent" lay-filter="img">
                <option value=""></option>
            </select>
        </div>
    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">地域选择：</label>
        <div class="layui-input-inline">
            <select name="regions" lay-filter="regions" id="regions">
                <option value=""></option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="zoneid" lay-filter="zone" id="zone">
                <option value="">请选择地域</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">机型选择：</label>
        <div class="layui-input-inline">
            <select name="describeTypes" lay-filter="describeTypes" id="describeTypes">
                <option value="你工作的第一个城市">你工作的第一个城市？</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">CPU：</label>
        <div class="layui-input-block" id="hostcpu">

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内存：</label>
        <div class="layui-input-block" id="hostsdk">

        </div>
    </div>
  <!--  <div class="layui-form-item">
        <label class="layui-form-label">价格/时：</label>
        <div class="layui-input-block">
            <input type="text" name="taocanprice" lay-verify="price" value="{$date.price}" placeholder="保留两位小数" class="layui-input layui-input80">
        </div>
    </div>-->
   <!-- <div class="layui-form-item">
        <label class="layui-form-label">磁盘类型：</label>
        <div class="layui-input-block">
            <select name="disktype" lay-verify="required"  lay-filter="disktype">
                <option value=""></option>
                <option value="ssd">SSD硬盘</option>
                <option value="ebs">云硬盘</option>
            </select>
        </div>
    </div>-->
    <input type="hidden" name="sdk" id="sdk">
    <input type="hidden" name="sdktype" id="sdktype">
    <!--<div class="layui-form-item">
        <label class="layui-form-label">磁盘大小：</label>
        <div class="layui-input-inline">
            <input type="text" name="diskzero" lay-verify="price" value="{$date.price|default=10}" placeholder="单位GB" class="layui-input">

        </div>
        <span style="display: block; padding: 9px 0px;">GB</span>
    </div>-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="sitesub">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--<script id="imgtpl" type="text/html">
    <option value="{{d.id}}">{{d.name}}</option>
</script>-->
<script>
    var instanceurl="{:U('Service/platfromDescribeInstanceTypes')}";
    var regionsurl="{:U('MyService/zone')}";
    var zoneurl="{:U('Service/regions')}";
    var hostlist={};
    var sdk=[],isone=0,platfromtype="1",regionsid='',zoneid='',describeTypesid='',regionname='',zonename='';
    getregions();
    form.render();
    form.on('select(service)', function(data){
        platfromtype=data.value;
        $('#regions').html('<option value="">没有获取到</option>');
        getregions();
    });

    function getregions(){
       var loadahsde=layer.load(1, {shade: [0.8, '#393D49'], time: 100000})
        $.post(regionsurl,{keyid:platfromtype},function(data){
            layer.close(loadahsde);
            if(data.code=101){
                $html='';
                layui.each(data.data,function(key,item){
                    if(key == 0){
                        $html += '<option value="' + item.region + '" selected>' + item.name + '</option>'
                        regionsid=item.region;
                        regionname=item.name;
                    }else {
                        $html += '<option value="' + item.region + '">' + item.name + '</option>'
                    }
                });
                $('#regions').html($html);

            }else{
                layer.msg(data.msg,{icon: 5});
                return;
            }
            form.render('select');
           getzone();
        });
    }

    form.on('select(regions)', function(data){
        regionsid=data.value;
        regionname=data.elem[data.elem.selectedIndex].text;
        getzone();
    });

    function getzone(){
        $('#zone').html('<option value="">请选择</option>');
        var loadahsde=layer.load(1, {shade: [0.8, '#393D49'], time: 100000})
        $.post(zoneurl,{keyid:platfromtype,regionsid:regionsid},function(data){
            layer.close(loadahsde);
            if(data.code == '101'){
                var zonehtml='';
                layui.each(data.data,function(key,item){
                    console.log(key);
                    if(key == 0){
                        console.log(item);
                        zonehtml+='<option title="'+item.availabilityZoneName+'" value="'+item.availabilityZoneId+'" selected>'+item.availabilityZoneName_CN+'</option>'
                        zoneid=item.availabilityZoneName;
                        zonename=item.availabilityZoneName_CN;
                    }else {
                        zonehtml+='<option  title="'+item.availabilityZoneName+'" value="'+item.availabilityZoneId+'">'+item.availabilityZoneName_CN+'</option>'
                    }
                });
                $('#zone').html(zonehtml);
            }else{
                layer.msg(data.msg,{icon: 5});
                return;
            }
            form.render('select');
            getinstance();
        });
    }

    form.on('select(zone)', function(data){
      //  console.log(data.elem[data.elem.selectedIndex]);
        zoneid=data.elem[data.elem.selectedIndex].title;//data.value;
        zonename=data.elem[data.elem.selectedIndex].text;
        getinstance();
    });
    function getinstance(){
        $('#describeTypes').html('<option value="">请选择</option>');
        $('#hostcpu').html('');
        $('#hostsdk').html('');
        form.render();
       var loadahsde=layer.load(1, {shade: [0.8, '#393D49'], time: 100000})
        $.post(instanceurl,{keyid:platfromtype,regionsid:regionsid,zoneid:zoneid},function(data){
            layer.close(loadahsde);
            if(data.code == '101'){
                hostlist=data['data']['host'];
                sdk=data['data']['Memory'];
                var zonehtml='';
                var i=0;
                var name=[];
                layui.each(hostlist,function(key,item){
                    //name=key.split(":");
                    zonehtml += '<option value="'+key+'"';
                    if (!name.hasOwnProperty(1)) {
                        if(i==0) {zonehtml+=' selected';describeTypesid=key;}
                        zonehtml+='>' + key + '</option>'
                    } else {
                        if(i==0) {zonehtml+=' selected';describeTypesid=key;}
                        zonehtml+='>' + key + '</option>'
                    }
                    i++;
                });
                $('#describeTypes').html(zonehtml);
            }else{
                layer.msg(data.msg,{icon: 5});
                return;
            }
            form.render('select');
            getdata();
        });
    }

    form.on('select(describeTypes)', function(data){
        describeTypesid=data.value;
        console.log(describeTypesid);
        getdata();
    });

    function getdata(){
        isone=0;
        $('#hostcpu').html('');
        $('#hostsdk').html('');
        var cpuhtml='';
        var sdkhtml='';
        var listnumber =0;
        layui.each(hostlist[describeTypesid], function (key, val) {
            if(listnumber === 0 ){
                cpuhtml+='<input type="radio" name="hostcpu"  lay-filter="hostcpu" value="'+key+'" title="'+key+'核" checked>';
                layui.each(sdk, function (i, j) {
                    sdkhtml+='<input type="radio" lay-filter="hostsdk" name="hostsdk"';
                    issdk=0;
                    layui.each(val,function(k,v){
                        if(v.memory==j){
                            isone++;
                            issdk=1;
                            if( isone == 1){
                                sdkhtml+='value="'+v.instancetypeid+'" date-type="'+v.instancetype+'"  title="'+v.memory+'G" checked>';
                                $('#sdk').val(v.memory+'G');
                                $('#sdktype').val(v.instancetype);
                            }else{
                                sdkhtml+='value="'+v.instancetypeid+'" date-type="'+v.instancetype+'"  title="'+v.memory+'G">';
                            }
                            return true
                        }
                    });
                    if(issdk==0){
                        sdkhtml+='value="0" date-type="0"  title="'+j+'G" disabled>';
                    }
                });
                listnumber=1;
            }else{
                cpuhtml+='<input type="radio" name="hostcpu" lay-filter="hostcpu" value="'+key+'" title="'+key+'核">';
            }
        });
        $('#hostcpu').html(cpuhtml);
        $('#hostsdk').html(sdkhtml);
        form.render();

    }

    form.on('radio(hostcpu)', function(data){
        isone=0;
        cpu=data.value;
        console.log(describeTypesid);
        console.log(hostlist[describeTypesid]);
        $('#hostsdk').html('');
        var sdkhtml='';
        layui.each(sdk, function (i, j) {
            sdkhtml+='<input type="radio" lay-filter="hostsdk" name="hostsdk"';
            issdk=0;
            layui.each(hostlist[describeTypesid][cpu],function(k,v){
                if(v.memory==j){
                    isone++;
                    issdk=1;
                    if(isone==1){
                        console.log(v);
                        sdkhtml+='value="'+v.instancetypeid+'" date-type="'+v.instancetype+'"  title="'+v.memory+'G" checked>';
                        $('#sdk').val(v.memory+'G');
                        $('#sdktype').val(v.instancetype);
                    }else{
                        sdkhtml+='value="'+v.instancetypeid+'" date-type="'+v.instancetype+'"  title="'+v.memory+'G">';
                    }
                    return true
                }
            });
            if(issdk==0){
                sdkhtml+='value="0" date-type="0"  title="'+j+'G" disabled>';
            }
        });
        $('#hostsdk').html(sdkhtml);
        form.render('radio');
    });
    form.on('radio(hostsdk)', function(data){
        $('#sdk').val(data.elem.title);
        $('#sdktype').val(data.elem.getAttribute('date-type'));
    });
    form.on('submit(sitesub)', function(data){
        var userInfo = data.field;
        userInfo.regionsname=regionname;
        userInfo.zonename=zonename;
        userInfo.zone=zoneid;
        console.log(userInfo);
        var url = "__SELF__";
        $.post(url,userInfo,function(data){
            if(data.code == '4001'){
                layer.msg(data.msg,{icon: 5});
                return;
            }else if(data.code == '101'){
                layer.msg(data.msg, {
                    icon: 6,
                    time: 2000
                }, function(){
                    location.reload();
                });
            }else{
                layer.msg("数据错误",{icon: 5});
                return;
            }
        });

        return false;
    });


</script>